<!-- //根据JsonSchema生成表单 -->
<template>
	<VAceEditor
		v-model:value="jsonData"
		@init="initJsonEditer"
		@input="validJson"
		lang="json"
		:theme="aceConfig.theme"
		:options="aceConfig.options"
		class="ace-editor w-full h-full"
	/>
</template>
<script setup lang="ts">
import { VAceEditor } from "vue3-ace-editor";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/theme-cobalt";
import "ace-builds/src-noconflict/theme-chrome";
import "ace-builds/src-noconflict/ext-static_highlight";
import "ace-builds/src-noconflict/ext-beautify";
let props = defineProps({
	data: {
		type: String,
		default: "{}"
	}
});
const emit = defineEmits(["update:data"]);
const jsonError = ref(false);
const jsonData = ref("{}");
const aceConfig = reactive({
	lang: "json", //解析json
	theme: "cobalt", //主题
	readOnly: false, //是否只读
	options: {
		enableBasicAutocompletion: true,
		enableSnippets: true,
		enableLiveAutocompletion: true,
		showPrintMargin: false,
		tabSize: 2,
		fontSize: 13
	}
});
watchEffect(() => {
	jsonData.value = JSON.stringify(JSON.parse(props.data), null, 2);
});
const initJsonEditer = () => {
	jsonData.value = JSON.stringify(JSON.parse(props.data), null, 2);
	// const data = `{"type":"object","required":["props"],"properties":{"profile":{"type":"string","title":"设备描述文件"},"description":{"type":"string","title":"备注"},"props":{"type":"object","required":["basic"],"properties":{"basic":{"type":"object","title":"基本信息","description":"<div style='font-size:16px;padding-bottom:5px;'>设备基本信息</div><div>一般是所有设备相对固化内容</div>","required":["sn"],"properties":{"sn":{"type":"string","title":"设备编号"},"name":{"type":"string","title":"名字"},"gatewaySn":{"type":"string","title":"网关"},"productModel":{"type":"string","title":"产品编码"},"groupId":{"type":"integer","title":"分组ID","default":0},"type":{"type":"string","title":"类型","default":"device","enum":["device","soft-gateway","gateway"]},"isOnline":{"type":"string","title":"在线状态","default":false},"createTime":{"type":"string","title":"創建时间"},"registerTime":{"type":"string","title":"注册时间"},"loginTime":{"type":"string","title":"上线时间"},"logoutTime":{"type":"string","title":"离线时间"},"lastLiveTime":{"type":"string","title":"末次交互时间"},"description":{"type":"string","title":"备注"}}},"platform":{"type":"object","required":[],"properties":{}},"system":{"type":"object","required":[],"properties":{}},"sensor":{"type":"object","required":[],"properties":{}},"config":{"type":"object","title":"变量模型","required":[],"properties":{"platform":{"type":"object","required":[],"properties":{"accessKey":{"type":"string"},"address":{"type":"string"},"deployNode":{"type":"string"}}},"gateway":{"type":"object","required":[],"properties":{"tcpPortRange":{"type":"string","title":"端口范围"}}},"subdevice":{"type":"array","title":"子设备","items":{"type":"object","required":["sn","sensor"],"properties":{"sn":{"type":"string","title":"SN"},"tcpPort":{"type":"string","title":"设备接入端口"},"addr":{"type":"integer","title":"地址","default":1},"timeout":{"type":"integer","title":"超时时间","default":300},"period":{"type":"integer","title":"采集周期","default":1000},"interval":{"type":"integer","title":"采集间隔","default":50},"sensor":{"type":"array","items":[{"type":"object","required":["key","unit","label","type","default"],"properties":{"key":{"type":"string","title":"属性","description":"属性：变量字段，一般是设备上报的字段"},"name":{"type":"string","title":"名字","description":"名字：变量名称，一般用于页面显示"},"unit":{"type":"string","title":"单位"},"tag":{"type":"string","title":"标签"},"type":{"type":"string","title":"类型"},"default":{"type":"string","title":"默认值"}}}]}}}}}}}},"funcs":{"type":"object","title":"远程控制","required":[],"properties":{}}}}`;
	// jsonData.value = JSON.stringify(JSON.parse(data), null, 2);
};
const validJson = () => {
	try {
		const res = JSON.stringify(JSON.parse(jsonData.value));
		emit("update:data", res);
		jsonError.value = false;
	} catch (e) {
		jsonError.value = true;
	}
};
</script>
